<template>
	<el-container id="container" style="min-height: calc(100% - 20px)">
		<el-aside width="250px" style="height: 100%">
			<el-container id="top" style="justify-content: center;height: 60px;line-height: 60px">
				<img src="~@/assets/logo.png" style="width: 25px;height: 25px;margin-top: 15px">
				<div style="font-size: 17px;margin-left: 10px">电商后台管理</div>
			</el-container>
			<el-menu
				:default-active="$route.path"
				style="height: calc(100% - 60px)"
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
				@select="selectItem">
				<el-sub-menu index="1">
					<template v-slot:title>
						<el-icon>
							<List/>
						</el-icon>
						<span>订单管理</span>
					</template>
					<el-menu-item index="/home/order/0">普通订单</el-menu-item>
					<el-menu-item index="/home/order/1">秒杀订单</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="2">
					<template v-slot:title>
						<el-icon>
							<Shop/>
						</el-icon>
						<span>商品管理</span>
					</template>
					<el-menu-item index="/home/goods/0">普通商品</el-menu-item>
					<el-menu-item index="/home/goods/1">秒杀商品</el-menu-item>
					<el-menu-item index="/home/goods/2">今日推荐</el-menu-item>
					<el-menu-item index="/home/goods/category">商品分类</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="3">
					<template v-slot:title>
						<el-icon>
							<Avatar/>
						</el-icon>
						<span>店长管理</span>
					</template>
					<el-menu-item index="/home/ownerList">店长列表</el-menu-item>
					<el-menu-item index="/home/ownerReq">店长申请审批列表</el-menu-item>
					<el-menu-item index="/home/ownerOrder">店长订单</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="4">
					<template v-slot:title>
						<el-icon>
							<Ticket/>
						</el-icon>
						<span>财务管理</span>
					</template>
					<el-menu-item index="/home/tradeInfo">交易明细</el-menu-item>
					<el-menu-item index="/home/tradeList">财务对账单</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="5">
					<template v-slot:title>
						<el-icon>
							<Tools/>
						</el-icon>
						<span>基础管理</span>
					</template>
					<el-menu-item index="/home/data">数据统计</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-aside>
		<el-main style="padding: 0">
			<el-header height="60px" style="margin: 0;padding: 0;background-color: #a7a7a8">
				<el-container
					style="background-color: blanchedalmond;height: 100%;padding: 0;margin: 0;justify-content: space-between">
					<div style="line-height: 60px;margin-left: 50px"><h2>欢迎登录管理后台</h2></div>
					<div style="line-height: 60px;margin-right: 20px">
						<el-button type="primary" @click="logout">注销</el-button>
					</div>
				</el-container>
			</el-header>
			<router-view></router-view>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "HomePage",
	methods: {
		logout() {
			this.$store.commit("clearUserInfo")
			this.$router.push({name: "login"})
		},
		selectItem(index) {
			this.$router.replace(index)
		}
	}
}
</script>

<style scoped>
#container {
	height: 100%;
	width: 100%;
	position: absolute;
}

#top {
	color: white;
	background-color: #545c64;
	margin-right: 1px;
	text-align: center;
	height: 60px;
}
</style>